<!--  -->
<template>
  <div class="padding-20 padding-top-30">
    <div class="font-size-16 font-weight-700" style="margin-bottom: 10px">选择时间</div>
    <form-common ref="form1" @selectChange="selectChange" v-if="m_Form1.length > 0" :formObj.sync="m_DataForm.formData" :filed-list="m_Form1"></form-common>
    <div>
      <template v-if="m_Revm">
        <div v-for="(row, i) in m_CheckBoxList" class="search-data-box" :key="i">
          <div class="font-size-16 font-weight-700">{{ row.TypeName }}</div>
          <el-form class="padding-top-15" label-width="160px" size="small" label-position="right">
            <el-row>
              <el-col :span="12" v-if="row.TypeName == '选择资产范围'">
                <el-form-item label="筛选资产类型">
                  <el-select multiple v-model="m_DataForm.assetRange" placeholder="请选择" clearable @change="assetRangeChange">
                    <el-option-group v-for="group in m_FilterAssetTypes" :key="group.label" :label="group.label">
                      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24" v-for="(cel, k) in row.List" :key="k + ' ' + i">
                <el-form-item :label="cel.Name + '：'">
                  <span style="padding: 0px 10px" v-for="(item, j) in cel.items" :key="i + ' ' + j + k">
                    <el-checkbox :label="item.name" :checked="item.IsCheck" @change="event => check(event, item, cel)"></el-checkbox>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <!-- <el-divider></el-divider> -->
        </div>
      </template>

      <el-form label-width="160px" size="small" label-position="right">
        <el-row>
          <el-col :span="5">
            <el-form-item label="显示计划栏偏差：">
              <el-switch v-model="m_DataForm.planDeviation.isShowPlanDeviation" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="">
              <!-- <el-switch v-model="m_DataForm.value2" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> -->
              <el-radio v-model="m_DataForm.planDeviation.collectionType" label="all">按全部汇总数据</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" label-width="170px">
              <!-- <el-switch v-model="m_DataForm.value3" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> -->
              <el-radio v-model="m_DataForm.planDeviation.collectionType" label="assetPackage">按资产包汇总数据</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <div class="text-align-right">
              <el-button size="large" @click="Reset">重置</el-button>
              <el-button size="large" type="primary" @click="goToInfo">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import formCommon from '@g/components/form/formCommon.vue';
import { Form1 } from './form.js';
import Api from '../../api/dataCenter';
export default {
  components: { formCommon },
  data() {
    return {
      m_Result: null,
      m_Revm: true,
      m_Form1: [],

      m_FilterAssetTypes: [
        { label: '资产类型', options: [] },
        { label: '地理位置', options: [] },
        { label: '资产年限', options: [] },
        { label: '资产面积', options: [] },
        { label: 'CAD面积', options: [] },
      ],
      value: '',
      m_DataForm: {
        //时间周期
        formData: {
          endTime: null,
          beginTime: null,
          cycleMonth: null,
        },
        assetRange: [],
        //资产类型
        assetRangeObj: {
          assetType: [], //资产类型
          position: [], //地理位置
          assetYears: [], //资产年限
          assetArea: [], //资产面积
          cadArea: [], //CAD面积
        },
        //计划偏差汇总类型
        planDeviation: {
          isShowPlanDeviation: null,
          collectionType: null,
        },
        //复选框
        checkIndicators: {},
      },

      m_CheckBoxList: [
        { TypeName: '选择资产范围', setDataKey: 'projectList', List: [] },
        {
          TypeName: '经营数据',
          List: [
            { Name: '收入（权责）', getDataKey: 'incomeType', setDataKey: 'forcastIncomeTypes', items: [] },
            { Name: '收入（现金流）', getDataKey: 'incomeType', setDataKey: 'cashIncomeTypes', items: [] },
            { Name: '支出（现金流）', getDataKey: 'payType', setDataKey: 'cashPayTypes', items: [] },
            { Name: '能耗支出（现金流）', getDataKey: 'energyPayType', setDataKey: 'cashEnergyPayTypes', items: [] },
          ],
        },
        {
          TypeName: '运营指标',
          List: [{ Name: '运营指标', getDataKey: 'operationalMetric', setDataKey: 'operationalMetrics', items: [] }],
        },
        {
          TypeName: '其他运营数据',
          List: [
            { Name: '出租率', getDataKey: 'rentalRate', setDataKey: 'rentalRateTypes', items: [] },
            { Name: '欠费金额', getDataKey: 'amountArrears', setDataKey: 'arrearsAmountTypes', items: [] },
            { Name: '重大事件数',getDataKey: 'workType', setDataKey: 'eventNumberTypes',items: [] },
            // { Name: '维保次数', items: [] },
            { Name: '商铺数量', getDataKey: 'shopNum', setDataKey: 'shopNumberTypes', items: [] },
            { Name: '客户数量',getDataKey: 'customerNumType',setDataKey: 'customerNumberTypes', items: [] },
            // { Name: '客服事件数', items: [] },
          ],
        },
      ],
    };
  },
  filters: {
    nullVal: function (msg) {
      return msg ? msg : '-';
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // m_Data: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {},
    // },
  },
  //接收参数
  props: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.m_Form1 = Form1;
    this.GetAssets();
    this.GetDataSource();
  },
  //方法集合
  methods: {
    selectChange(data){
      this.m_DataForm.formData[data.filedName] = data.filedVal
    },
    //选择资产范围
    GetAssets() {
      Api.GetAssets({}).then(res => {
        let arr = [];
        res.rows.forEach(asset => {
          let obj = {
            Name: asset.packageName,
            items: [{ name: '全部', IsCheck: false }],
            detail: asset,
          };
          if(asset.projectList&& asset.projectList.length>0){
            asset.projectList.forEach(proj => {
            obj.items.push({ name: proj.name, IsCheck: false, detail: { ...proj, value: proj.primaryKey } });
          });
          }
          arr.push(obj);
          this.m_CheckBoxList[0].List = arr;
        });
      });
    },
    //查询筛选条件
    GetDataSource() {
      Api.GetDataSource({}).then(res => {
        this.m_FilterAssetTypes[0].options = res.result.assetType; //资产类型
        this.m_FilterAssetTypes[1].options = res.result.position; //地理位置
        this.m_FilterAssetTypes[2].options = res.result.assetYears; //资产年限
        this.m_FilterAssetTypes[3].options = res.result.assetArea; //资产面积
        this.m_FilterAssetTypes[4].options = res.result.cadArea; //CAD面积
        for (let i = 1; i < this.m_CheckBoxList.length; i++) {
          this.m_CheckBoxList[i].List.forEach(item => {
            if (item.getDataKey) {
              item.items = [{ name: '全部', IsCheck: false }];
              res.result[item.getDataKey].forEach(element => {
                item.items.push({ name: element['label'], IsCheck: false, detail: element });
              });
            }
          });
        }
        this.m_Result = res.result;
      });
    },

    goToInfo() {
      let obj = this.$refs['form1'].validateForm();
      if (!obj) return;
      if (this.m_DataForm.checkIndicators.projectList && this.m_DataForm.checkIndicators.projectList.length == 0) {
        this.$message.warning('必须勾选至少一个项目！');
        return;
      }
      let dataForm = {
        ...this.m_DataForm.formData,
        ...this.m_DataForm.assetRangeObj,
        ...this.m_DataForm.planDeviation,
        ...this.m_DataForm.checkIndicators,
      };
      dataForm.isShowPlanDeviation = dataForm.isShowPlanDeviation ? 1 : 0;
      localStorage.setItem('serchAssetForm', JSON.stringify(dataForm));

      let pathUrl = {
        name: 'asset-comparisohome-search-result',
        query: {
          headerName:"资产对比",
        }
      };
      let { href } = this.$router.resolve(pathUrl);
      window.open(href);
    },
    //重置
    Reset() {
      this.m_CheckBoxList.forEach(list => {
        list.List.forEach(item => {
          item.items.forEach(obj => {
            obj.IsCheck = false;
          });
        });
      });
      this.m_DataForm.assetRange = [];
      for (let key in this.m_DataForm.planDeviation) {
        this.m_DataForm.planDeviation[key] = null;
      }
      for (let key in this.m_DataForm.checkIndicators) {
        this.m_DataForm.checkIndicators[key] = [];
      }
      for (let key in this.m_DataForm.assetRangeObj) {
        this.m_DataForm.assetRangeObj[key] = [];
      }
      for (let key in this.m_DataForm.formData) {
        this.m_DataForm.formData[key] = null;
      }
      this.m_Revm = false;
      this.$nextTick(() => {
        this.m_Revm = true;
      });
      this.setParamsData();
    },
    //筛选变更
    check(res, item, cel) {
      console.log(res, item, cel);
      if (item.name == '全部') {
        for (let i = 0; i < cel.items.length; i++) {
          cel.items[i].IsCheck = res;
        }
      } else {
        let falg = true;
        item.IsCheck = res;
        for (let i = 1; i < cel.items.length; i++) {
          if (!cel.items[i].IsCheck) falg = false;
        }
        cel.items[0].IsCheck = falg;
      }
      this.m_Revm = false;
      this.$nextTick(() => {
        this.m_Revm = true;
      });
      this.setParamsData();
    },
    //资产类型条件取值
    assetRangeChange(res) {
      for (let key in this.m_DataForm.assetRangeObj) {
        this.m_DataForm.assetRangeObj[key] = [];
        this.m_DataForm.assetRange.forEach(val => {
          let obj = this.m_Result[key].find(item => {
            return item.value == val;
          });
          if (obj) this.m_DataForm.assetRangeObj[key].push(obj.value);
        });
      }
      console.log(this.m_DataForm);
    },
    //其他勾选条件取值
    setParamsData() {
      for (let i = 0; i < this.m_CheckBoxList.length; i++) {
        let arrAll = [];
        this.m_CheckBoxList[i].List.forEach(item => {
          let flagAll = this.m_CheckBoxList[i].setDataKey;
          let keyName = this.m_CheckBoxList[i].setDataKey || item.setDataKey;
          if (keyName) {
            let arr = [];
            item.items.forEach(element => {
              if (element.IsCheck && element.detail) {
                if (flagAll) arrAll.push(element.detail['value']);
                else arr.push(element.detail['value']);
              }
            });
            this.$set(this.m_DataForm.checkIndicators, keyName, flagAll ? arrAll : arr);
          }
        });
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-divider {
  margin: 24px 0px;
}

.search-data-box {
  margin-top: 10px;
}
/* @import url(); 引入css类 */
</style>
